<template>
  <div class="magic-card">
    <!-- 卡片头部，支持头像 -->
    <div v-if="$slots.avatar || title" class="card-header">
      <div v-if="$slots.avatar" class="card-avatar">
        <slot name="avatar" />
      </div>
      <div v-if="title" class="card-info">
        <h3 class="character-name">{{ title }}</h3>
        <p v-if="description" class="character-description">{{ description }}</p>
        <div v-if="$slots.meta || meta" class="character-meta">
          <slot name="meta">
            <span v-for="item in meta" :key="item" class="meta-tag">{{ item }}</span>
          </slot>
        </div>
      </div>
    </div>

    <!-- 卡片内容 -->
    <div v-if="$slots.default" class="card-content">
      <slot />
    </div>

    <!-- 卡片操作区 -->
    <div v-if="$slots.actions" class="card-actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  },
  meta: {
    type: Array,
    default: () => []
  }
})
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.card-header.text-center {
  text-align: center;
  flex-direction: column;
  gap: 10px;
}

.card-avatar {
  flex-shrink: 0;
}

.card-info {
  flex: 1;
}

.card-content {
  margin-bottom: 15px;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 当只有actions时，不需要上边距 */
.magic-card:has(.card-actions:first-child) .card-actions {
  margin-top: 0;
}
</style>
